import { useEffect, useState } from 'react'
import classNames from 'classnames'
import { message, Select } from 'antd'
import Icon from '@ant-design/icons'

import { apiSetLogisticsProduct } from '../../apis'
import { useBoundStore } from '../../store'
import { getFirstLineName, getLogisticsProductServiceLevelName, useUrlParams } from '../../utils'
import { CardHeaderEdit } from '../CardHeaderEdit'
import { EditableForm } from '../EditableForm'
import { FormSchemaItem } from '../EditableForm/interface'
import { MaxMinDay } from './MaxMinDay'
import seaFreight from '@/assets/icons/seaFreight.svg?react'
import styles from './styles.module.less'

const formSchema: FormSchemaItem[] = [
  {
    name: 'logisticsProductName',
    editable: false,
    renderView: ({ record, name }) => {
      return (
        <div className={styles.productName}>
          <Icon component={seaFreight} className={styles.productIcon} />
          <div>
            <div className={classNames('small_print_strong')}>{record[name]}</div>
            <div className={classNames('small_print', styles.productInlineName)}>
              {record['logisticsProductInlineName']}
            </div>
          </div>
        </div>
      )
    },
  },
  {
    name: 'logisticsProductInlineName',
    hidden: true,
  },
  {
    name: 'logisticsProductTransportType',
    label: '运输方式',
    component: Select,
    componentProps: {
      placeholder: '请选择',
      options: getFirstLineName.valueList.map(value => ({
        label: getFirstLineName(value),
        value,
      })),
    },
    formItemProps: {
      className: classNames('small_print'),
    },
    renderView: ({ record, name }) => getFirstLineName(record[name]),
  },
  {
    name: 'logisticsProductServiceLevel',
    label: '服务等级',
    component: Select,
    formItemProps: {
      className: classNames('small_print'),
    },
    componentProps: {
      placeholder: '请选择',
      options: getLogisticsProductServiceLevelName.valueList.map(value => ({
        label: getLogisticsProductServiceLevelName(value),
        value,
      })),
    },
    renderView: ({ record, name }) => getLogisticsProductServiceLevelName(record[name]),
  },
  {
    name: 'logisticsProductServiceTransit',
    label: '服务时效',
    formItemProps: {
      className: classNames('small_print'),
    },
    component: MaxMinDay, // 自定义组件
    renderView: ({ record, name }) => {
      const { maxVal, minVal } = record[name] || {}
      return `${minVal} ~ ${maxVal} 天`
    },
  },
]

export const ProductsInfo = () => {
  const [edit, setEdit] = useState(false)
  const [form] = EditableForm.useForm()
  const detail = useBoundStore(state => state.detail)
  const { waybillNo } = useUrlParams()

  const initForm = () => {
    form.setFieldsValue({
      logisticsProductName: detail?.logisticsProductName || '',
      logisticsProductInlineName: detail?.logisticsProductInlineName || '',
      logisticsProductTransportType: detail?.logisticsProductTransportType || '',
      logisticsProductServiceLevel: detail?.logisticsProductServiceLevel || '',
      logisticsProductServiceTransit: {
        maxVal: detail?.logisticsProductServiceTransitMax || '',
        minVal: detail?.logisticsProductServiceTransitMin || '',
      },
    })
  }

  const save = () => {
    const values = form.getFieldsValue()
    const {
      logisticsProductTransportType,
      logisticsProductServiceLevel,
      logisticsProductServiceTransit: { maxVal, minVal },
    } = values
    if (!logisticsProductTransportType || !logisticsProductServiceLevel || !maxVal || !minVal) {
      return message.error('请填写完整')
    }
    apiSetLogisticsProduct({
      logisticsProductTransportType,
      logisticsProductServiceLevel,
      logisticsProductServiceTransitMax: maxVal,
      logisticsProductServiceTransitMin: minVal,
      waybillNo: waybillNo,
    })
      .then(() => {
        message.success('保存成功')
      })
      .finally(() => {
        setEdit(false)
      })
  }

  const openEdit = () => {
    setEdit(true)
  }

  const cancel = () => {
    setEdit(false)
    initForm()
  }

  useEffect(() => {
    initForm()
  }, [detail])

  return (
    <>
      <CardHeaderEdit title="物流产品" edit={edit} save={save} cancel={cancel} openEdit={openEdit} />
      <EditableForm
        form={form}
        editable={edit}
        formSchema={formSchema}
        formProps={{ layout: 'vertical', size: 'small' }}
        span={12}
      />
    </>
  )
}
